
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>滑动轮播示例</title>
    <link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.css" />

    <style>
        #wrap{
            background-color: gray;
            overflow: hidden;
            height: 400px;
            width: 100%;
        }

        #wrap ul {
            position: relative;
            left:-200%;
            top:0px;
            height: 200px;
            width: 300%;
        }

        #wrap ul li{
            border: solid 1px white;
            float: left;
            background-color: black;
            height: 200px;
            width: 33.2%;
            color:white;
        }
        #test1{
            width: 400px;
            height: 400px;
            background-color: #fddfdf;
            padding-top: 0%;
        }
        #test1 div{
            width: 50px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div id="test1">
    <div></div>
</div>

</body>
<script type="text/javascript" src="./js/jquery.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
    var x=-200;
   // alert($("#wrap  ul").css("left"));
    var t=-100;
        setInterval(function () {
            if(x==0){
                t=-t;
            }else if(x==-200){
                t=-t;
            }
            x=x+t;
            $("#wrap  ul").animate({left:x+"%"},1000);
        },4000);
    //$("#wrap  ul").animate({left:0},5000);



</script>
</html>